<template>
  <div>
    <!--        <el-button  @click="drawer = true" type="small">-->
    <!--            新增课程-->
    <!--        </el-button>-->
    <el-drawer
      custom-class="learn-drawer"
      title="我是标题"
      :visible.sync="drawer"
      direction="btt"
      size="100%"
      :modal="false"
      :before-close="drawerClose"
    >
      <el-container style="min-height: 100%">
        <!-- 头部 -->
        <el-header>
          <el-steps :active="step" simple>
            <el-step title="1 填写信息" icon="el-icon-edit"></el-step>
            <el-step title="2 上传资源" icon="el-icon-upload"></el-step>
            <el-step title="3 授权" icon="el-icon-s-tools"></el-step>
          </el-steps>
        </el-header>
        <!-- 内容 -->
        <el-main style="height:100px;overflow: auto">
          <!-- 第一步，填写资料 -->
          <el-row v-show="parseInt(step) === 0" :gutter="20">
            <el-col :push="4" :span="13">
              <el-form ref="basicData" :model="dataForm" label-width="80px" :rules="rules">
                <el-form-item label="课程名称" prop="title">
                  <el-input v-model="dataForm.title"></el-input>
                </el-form-item>
                <el-form-item label="课程简介" prop="brief">
                  <el-input type="textarea" :rows="10" v-model="dataForm.brief"></el-input>
                </el-form-item>
                <div class="learn-drawer-form-flex">
                  <el-form-item label="课时" prop="classHour">
                    <el-input type="number" placeholder="请输入0-10000" v-model="dataForm.classHour"></el-input>
                  </el-form-item>
                  <el-form-item label="学分" prop="creditHour">
                    <el-input type="number" v-model="dataForm.creditHour" placeholder="请输入0-10000"></el-input>
                  </el-form-item>
                </div>
                <el-form-item label="课程状态" prop="classStatus">
                  <el-radio-group v-model="dataForm.classStatus">
                    <el-radio :label="0">未发布</el-radio>
                    <el-radio :label="1">已发布</el-radio>
                    <el-radio :label="2">取消发布</el-radio>
                    <el-radio :label="3">课程下架</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="公告类型" prop="relateType">
                  <el-radio-group v-model="dataForm.relateType">
                    <el-radio :label="1">关联部门</el-radio>
                    <el-radio :label="0">全员参与</el-radio>
                  </el-radio-group>
                </el-form-item>
                <!--                                <el-form-item label="课程分类" prop="assort">-->
                <!--                                    <el-select v-model="dataForm.assort" placeholder="请选择" style="width: 100%">-->
                <!--                                        <el-option-->
                <!--                                                v-for="item in options"-->
                <!--                                                :key="item.value"-->
                <!--                                                :label="item.label"-->
                <!--                                                :value="item.value">-->
                <!--                                        </el-option>-->
                <!--                                    </el-select>-->
                <!--                                </el-form-item>-->
                <el-form-item label="课程分类" prop="cateId">
                  <el-select v-model="dataForm.cateId" filterable placeholder="请选择">
                    <el-option
                      v-for="item in cateList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <div class="learn-drawer-form-flex">
                  <el-form-item label="开始时间">
                    <el-date-picker
                      v-model="dataForm.startTime"
                      type="date"
                      value-format="timestamp"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </el-form-item>
                  <p class="learn-drawer-form-line">~</p>
                  <el-form-item label="结束时间">
                    <el-date-picker
                      v-model="dataForm.endTime"
                      value-format="timestamp"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </el-form>
            </el-col>
            <!--                        <el-col :push="4" :span="3">-->
            <!--                            <uploadCover/>-->
            <!--                        </el-col>-->
            <el-col :push="4" :span="3">
              <el-form>
                <el-form-item label="封面" prop="mainImg">
                  <el-upload
                    :action="actionImg"
                    list-type="picture-card"
                    :on-success="handleImgSuccess"
                    :before-upload="beforeImgUpload"
                    :on-remove="handleImgRemove"
                    :file-list="dataForm.mainImgUrl"
                    :limit="1"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <!--                  <span class="el-upload__tip">小提示：建议上传大小为615*245</span>-->
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <!-- 第二步，上传资源 -->
          <el-row v-show="parseInt(step) === 1" :gutter="20">
            <el-col>
              <div class="learn-drawer-title">
                <h4>上传课件</h4>
                <!--                                <p>-->
                <!--                                    音视频资源完成规则：学习时长需达到音视频总时长的-->
                <!--                                    <el-input type="number" style="width:100px" />-->
                <!--                                    %, 播放进度为音视频总进度的-->
                <!--                                    <el-input type="number" style="width:100px" />-->
                <!--                                    %-->
                <!--                                </p>-->
              </div>
            </el-col>
            <el-col>
              <el-table :data="uploadAll" border :span-method="arraySpanMethod" style="width: 100%">
                <el-table-column label="序号" type="index" width="80" />
                <el-table-column label="名称" width="380">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.name" />
                  </template>
                </el-table-column>
                <el-table-column prop="raw[type]" label="类型" :show-overflow-tooltip="true" />
                <!--                <el-table-column label="课件时长">-->
                <!--                  <template slot-scope="scope">-->
                <!--                    <div class="learn-drawer-form-flex">-->
                <!--                      <el-input type="number" v-model="scope.row.minute"/>-->
                <!--                      分-->
                <!--                      <el-input type="number" v-model="scope.row.second"/>-->
                <!--                      秒-->
                <!--                    </div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column align="right" width="288">
                  <template slot="header">
                    <el-button type="primary" @click="openUploadAll">上传课件</el-button>
                    <el-button type="primary" @click="openAddExam">添加考试</el-button>
                    <el-button type="primary" @click="openAddOperation">添加作业</el-button>
                  </template>
                  <template>
                    <el-button type="info" title="向上" circle icon="el-icon-sort-up" />
                    <el-button type="info" title="向下" circle icon="el-icon-sort-down" />
                    <!-- <el-button  title="修改" type="primary" circle icon="el-icon-edit"/>-->
                    <el-button title="删除" type="danger" circle icon="el-icon-delete" />
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <!-- 第三步，选择范围+发布 -->
          <el-row v-show="parseInt(step) === 2" :gutter="20" class="learn-drawer-range">
            <el-col>
              <h4>
                发布范围
                <span>（发布范围内的用户拥有该课程的学习权限）</span>
              </h4>
              <div class="learn-drawer-range-box">
                <p>
                  <el-tag v-for="x in rangeTags" :key="x" closable>{{x}}</el-tag>
                </p>
                <div class="learn-drawer-range-box-buttons">
                  <el-button type="danger" round @click="rangeTags = []">清空</el-button>
                  <el-button type="primary" round @click="openCheckPeople">添加</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-main>
        <!-- 底部 -->
        <el-footer class="learn-drawer-footer">
          <el-button round type="danger" @click="drawerClose">关闭</el-button>
          <el-button v-show="parseInt(step) > 0" round type="info" @click="onBack">上一步</el-button>
          <el-button v-show="parseInt(step) < 2" round type="success" @click="onSubmit">下一步</el-button>
          <!--<el-button  round type="primary" @click="onSubmit">保存</el-button>-->
          <el-button v-show="parseInt(step) >= 2" round type="success" @click="release">发布</el-button>
        </el-footer>
      </el-container>
    </el-drawer>
    <!-- 上传课件弹出框 -->
    <uploadAll ref="uploadAll" :uploadAll="uploadAll" :setUploadAll="setUploadAll" />
    <!-- 添加考试 -->
    <addExam ref="addExam" />
    <!-- 添加作业 -->
    <addOperation ref="addOperation" />
    <!-- 选择对象弹出框 -->
    <assignAll />
    <!-- 添加审核人弹出框 -->
    <checkPeople :userList="userList" :setUserList="setUserList" ref="checkPeople" />
  </div>
</template>

<script>
import assignPeople from '../../components/assign/assignPeople'
import assignAll from '../../components/assign/assignAll'
import selectTopic from '../../components/check/selectTopic'
import addOperation from '../../components/check/addOperation'
import uploadAll from '../../components/upload/uploadAll'
import uploadCover from '../../components/upload/uploadCover'
import checkPeople from '../../components/check/checkPeople'
import AddExam from '../../components/check/addExam'
import Vue from 'vue'

export default {
  name: 'drawer',
  data() {
    return {
      value: 0,
      userList: [],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      rangeTags: ['全部人员'],
      endTime: '',
      step: 0,
      formInline: {
        user: '',
        region: ''
      },
      cateList: [],
      actionImg:
        this.$http.adornUrl('/sys/oss/upload?token=') + Vue.cookie.get('token'),
      dataForm: {
        cateId: '',
        title: '',
        classHour: '',
        brief: '',
        creditHour: '',
        startTime: '',
        endTime: '',
        imgOssId: '',
        classStatus: 0,
        relateType: 0,
        id: ''
      },
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      operationDialogVisible: false,
      examDialogVisible: false,
      drawer: false,
      form: {
        name: '',
        assort: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        title: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
        mainImg: [
          { required: true, message: '请选择课程分类', trigger: 'change' }
        ]
      },
      uploadAll: []
    }
  },
  props: ['getDataList'],
  methods: {
    setUserList(data) {
      this.userList = data
    },
    openCheckPeople() {
      this.$refs['checkPeople'].init()
    },
    openUploadAll() {
      this.$refs['uploadAll'].init()
    },
    openAddExam() {
      this.$refs['addExam'].init()
    },
    openAddOperation() {
      this.$refs['addOperation'].init()
    },
    drawerClose() {
      this.step = 0
      this.drawer = false
    },
    getList() {
      this.$http({
        url: this.$http.adornUrl(`/train/traincate/getList`),
        method: 'post'
      }).then(data => {
        this.cateList = data.data
      })
    },
    init(id) {
      this.dataForm.id = id
      this.drawer = true
      this.getList()
      this.$http({
        url: this.$http.adornUrl(
          `/train/traincurriculum/info/${this.dataForm.id}`
        ),
        method: 'post'
      }).then(data => {
        this.dataForm.brief = data.data.brief
        this.dataForm.cateId = data.data.cateId
        this.dataForm.creditHour = data.data.creditHour
        this.dataForm.title = data.data.title
        this.dataForm.startTime = data.data.startTime
        this.dataForm.imgOssId = data.data.ossId
        this.dataForm.relateType = data.data.relateType
        this.dataForm.classStatus = data.data.classStatus
        this.dataForm.classHour = data.data.classHour
        this.dataForm.endTime = data.data.endTime
        // this.cateList = data.data
      })
    },
    setUploadAll(data) {
      this.uploadAll = data
    },
    onBack() {
      switch (this.step) {
        case 2:
          this.step = 1
          break
        case 1:
          this.step = 0
          break
        default:
          break
      }
    },
    // 上传主图
    handleImgSuccess(res, file) {
      this.dataForm.imgOssId = res.data.id
    },
    beforeImgUpload(file) {
      let isJPG = file.type.split('/')[0] === 'image'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.warning('只能上传图片格式!')
      }
      if (!isLt2M) {
        this.$message.warning('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleImgRemove(file, fileList) {
      this.dataForm.mainImg = ''
      this.dataForm.mainImgUrl = []
    },
    onSubmit() {
      switch (this.step) {
        case 0:
          this.$refs['basicData'].validate(valid => {
            if (valid) this.step = 1
          })
          break
        case 1:
          if (this.uploadAll.length) {
            this.step = 2
          } else {
            this.$notify.warning({
              title: '错误',
              message: '存在无内容的空课件'
            })
          }
          break
        case 2:
          if (this.rangeTags.length) {
            this.drawer = false
          } else {
            this.$notify.warning({
              title: '错误',
              message: '受众对象为必填项'
            })
          }
          break
        default:
          break
      }
    },
    release() {
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl(
            `/train/traincurriculum/${!this.dataForm.id ? 'save' : 'update'}`
          ),
          method: 'post',
          data: {
            id: this.dataForm.id,
            title: this.dataForm.title,
            brief: this.dataForm.brief,
            cateId: this.dataForm.cateId,
            imgOssId: this.dataForm.imgOssId,
            classHour: this.dataForm.classHour,
            creditHour: this.dataForm.creditHour,
            startTime: this.dataForm.startTime,
            endTime: this.dataForm.endTime,
            classStatus: this.dataForm.classStatus,
            relateType: this.dataForm.relateType
          }
        }).then(res => {
          if (res && res.code === 200) {
            this.drawer = false
            this.getDataList()
          }
        })
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(this.tableData.length)
      // console.log({row, column, rowIndex, columnIndex})
    }
  },
  components: {
    AddExam,
    assignPeople,
    assignAll,
    selectTopic,
    addOperation,
    uploadAll,
    uploadCover,
    checkPeople
  }
}
</script>
